import React, {Component} from 'react'
import {View, Text, FlatList, TouchableOpacity, Animated, ScrollView, Image} from 'react-native'
import ParallaxScrollView from 'react-native-parallax-scroll-view'
import {connect} from 'react-redux'
import {fetch_chapters} from '../../redux/actions/chapter'
import NavigatorService from '../../config/navigate_service'
import StarsCommon from '../common/stars_common'
import LoadingCommon from '../common/loading_common'
import styles, {BLUE} from '../../config/styles'
import Icon from 'react-native-vector-icons/Ionicons'

class ChaptersList extends Component {
    constructor (props) {
        super(props)
        const {params} = props.navigation.state
        this.state = {
            dataSource: [],
            loading: true,
            name: "",
            cover_url: "",
            learning_count: 0,
            description: "",
            textbook_id: params.textbook_id
        }
    }

    componentWillReceiveProps (nextProps) {
        let chapter = nextProps.chapter
        let {loading, chapters, name, cover_url, learning_count, description} = chapter
        this.setState({
            loading: loading,
            dataSource: chapters,
            name: name,
            cover_url: cover_url,
            learning_count: learning_count,
            description: description
        })
    }

    componentDidMount () {
        this.getData()
    }

    getData = () => {
        const {textbook_id} = this.state
        this.props.dispatch(fetch_chapters(textbook_id))
    }

    _keyExtractor = (item, index) => index
    
    _renderItem = (item, index) => {
        let startCount
        if (item.section_score >= 80) {
            startCount = 3
        } else if (item.section_score >= 60 && item.section_score < 80) {
            startCount = 2
        } else if (item.section_score >= 30 && item.section_score < 60) {
            startCount = 1
        } else {
            startCount = 0
        }
        return(
            <TouchableOpacity
                key={index}
                onPress={() => {NavigatorService.navigate('self_learning_show', {id: item.id})}}
                style={{
                    padding: 5, height: 80, backgroundColor: 'white', flexDirection: 'row', borderBottomWidth: 0.3, borderBottomColor: '#707070'}}
            >
                <View style={{padding: 5, justifyContent: 'center'}}>
                    <Text style={{fontSize: 18}}>{item.chapter_name}</Text>
                    <Text style={{color: '#707070', fontSize: 18}}>{item.name}</Text>
                </View>
                <View style={{flex: 1, alignItems: 'flex-end', padding: 5, justifyContent: 'center'}}>
                    <View style={{alignItems: 'center'}}>
                        <Text style={styles.list_item_gray_text}>完成进度</Text>
                        <StarsCommon style={{justifyContent: 'flex-end', marginTop: 5}} activeCount={startCount} />
                    </View>
                </View>
            </TouchableOpacity>
        )
    }

    render() {
        const {loading, chapters, name, cover_url, learning_count, description ,dataSource} = this.state
        return (
            this.state.loading ? <LoadingCommon /> :
            <ParallaxScrollView
                backgroundColor={BLUE}
                parallaxHeaderHeight={300}
                renderBackground={() => (
                    <Image source={{uri: cover_url}} style={{resizeMode: 'cover', height: 300}}/>
                )}
                renderStickyHeader={() => (
                    <View style={{flex: 1}}></View>
                )}
                renderFixedHeader={() => (
                    <TouchableOpacity 
                        onPress={() => {NavigatorService.back()}}
                        style={{flex: 1, position: 'absolute', top: 25,left: 10}}
                    >
                        <Icon name={'ios-arrow-back'} color={'white'} size={32}/>
                    </TouchableOpacity>
                )}
                
                stickyHeaderHeight={50}
                renderForeground={() => (
                    <View style={{flex: 1}}>
                       <View style={{flex: 1, alignItems: 'center', marginTop: 20}}>
                            <Text style={{color: 'white', fontSize: 16, fontWeight: 'bold'}}>课程详情</Text>
                        </View>
                        <View style={{justifyContent: 'flex-end', alignItems: 'flex-start', flex: 1, padding: 10}}>
                            <Text style={{color: 'white', fontWeight: 'bold', fontSize: 20}}>{name}</Text>
                            <Text style={{color: 'white', marginTop: 10}}>{description}</Text>
                            <Text style={{color: 'white', marginTop: 30}}>{learning_count}人正在学习</Text>
                        </View>
                    </View>
                   
                )}
            >  
                <ScrollView>
                    {
                        dataSource.map((data, index) => {
                            return this._renderItem(data, index)
                        })
                    }
                </ScrollView>
            </ParallaxScrollView>
        );
      }
}


const mapStateToProps = (state) => {
    return {
        chapter: state.chapter,
        user: state.user
    }
}

export default connect(mapStateToProps)(ChaptersList)